<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">

		<button-search class="pt-3" :showSearch="false">
			<template #left>
				<el-button size="mini" type="success"
				@click="openCreateModel(false)">添加规格</el-button>
				<el-button size="mini" type="danger"
				@click="deleteAll">批量删除</el-button>
			</template>
		</button-search>
		<!-- 商品列表 -->
		<el-table border class="mt-3" :data="tableData" style="width: 100%"
		@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="45" align="center">
			</el-table-column>
			<el-table-column label="规格名称" width="200" prop="name">
			</el-table-column>
			<el-table-column prop="default" label="规格值" align="center" width="300">
			</el-table-column>
			<el-table-column prop="order" label="排序" align="center">
			</el-table-column>
		
			<el-table-column label="规格状态" align="center">
				<template slot-scope="scope">
					<el-button :type="scope.row.status ? 'success' : 'danger'" size="mini" plain
					@click="changeStatus(scope.row)">
						{{scope.row.status ? '启用' : '禁用'}}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="规格类型" align="center">
				<template slot-scope="scope">
					{{getTypeNameByTypeValue(scope.row.type)}}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button-group>
						<el-button type="success" size="mini"
						@click="openCreateModel(scope)">修改</el-button>
						<el-button type="danger" size="mini" 
						@click="deleteItem(scope)">
							删除
						</el-button>
					</el-button-group>
				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="d-flex border-top align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 10;">
			<div class="px-2" style="flex: 1;">
				<el-pagination
				 @size-change="handleSizeChange" 
				 @current-change="handleCurrentChange" 
				 :current-page="page.current"
				 :page-sizes="page.sizes" 
				 :page-size="page.size" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="page.total">
				</el-pagination>
			</div>
		</el-footer>

		<!-- 添加规格 model -->
		<el-dialog :title="editIndex > -1 ? '修改规格': '添加规格'" :visible.sync="showCreateModel" top="5vh">
			<el-form :rules="rules" ref="form" :model="form" label-width="80px">
				
				<el-form-item label="规格名称" prop="name" >
					<el-col :span="6">
						<el-input v-model="form.name" 
						placeholder="规格名称" size="mini"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="排序" >
					<el-input-number v-model="form.order" 
					placeholder="规格名称" size="mini" :min="0"></el-input-number>
				</el-form-item>
				<el-form-item label="状态" >
					<el-radio-group v-model="form.status" size="mini">
						<el-radio :label="1"  border>启用</el-radio>
						<el-radio :label="0"  border>禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="类型" >
					<el-radio-group v-model="form.type" size="mini">
						<el-radio :label="0"  border>文字</el-radio>
						<el-radio :label="1"  border>颜色</el-radio>
						<el-radio :label="2"  border>图片</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="规格值" prop="default">
					<el-input v-model="form.default" 
					type="textarea"
					:rows="4"
					placeholder="一行一个规格值,记得换行"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showCreateModel = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import buttonSearch from "@/components/common/button-search.vue"
	import common from "@/common/mixins/common.js";

	export default {
		
		inject: ['layout'],
		
		mixins: [common],
		
		components: {
			buttonSearch,
		},

		// created() {
		// 	this.getList()
		// },
		

		data() {
			return {
				
				preUrl: 'skus',
				
				form: {
					name: '',
					order: 50,
					status: 1,
					type: 0,
					default: ''
				},
				
				//当前编辑的索引
				editIndex: -1,
				
				//rules
				rules: {
					name: [
						{
							required: true,
							message: '规格名称不能为空',
							trigger: 'blur'
						},
					],
					default: [
						{
							required: true,
							message: '规格值不能为空',
							trigger: 'blur'
						},
					]
				},
	
				tableData: [],

				
				
				//是否显示添加规格model
				showCreateModel: false
			}
		},
		


		methods: {
			//重写getListResult
			getListResult(e) {
				this.tableData = e.list
			},
			
			//批量删除
			
			
			//根据类型value获取类型名称
			getTypeNameByTypeValue(type) {
				let name = ''
				switch(type) {
					case 0:
						name = '文字'
						break
					case 1:
						name = '颜色'
						break
					case 2:
						name = '图片'
						break
					default:
						name = ''
				}
				return name
			},
			
			//打开新增规格model
			openCreateModel(e = false) {
				if (!e) { //增加
					this.form = {
						name: '',
						order: 50,
						status: 1,
						type: 0,
						default: ''
					}
					this.editIndex = -1
				} else {
					this.form = {
						name: e.row.name,
						order: e.row.order,
						status: e.row.status,
						type: e.row.type,
						default: e.row.default.replace(/,/g, '\n')
					}
					this.editIndex = e.$index
				}
				
				this.showCreateModel = true
			},
			
			//submit
			submit() {
				this.$refs.form.validate(res => {
					if (res) {
						let arr = this.form.default.split(/[(\r\n)\r\n]+/)
						arr = arr.filter(v => v && v.trim() !== '')
						this.form.default = arr.join(',')
						let id = 0
						if (this.editIndex !== -1) { //修改
							id = this.tableData[this.editIndex].id
						} 
						this.addOrEdit(this.form, id)
						//关闭模态框
						this.showCreateModel = false
					}
				})
				
			},
			


			//删除当前规格
			
			//生成列表数据
			

			
			
			
	
		}
	}
</script>

<style>
</style>
